<template>
  <div>
    <el-dialog ref="dialog" :title="setTitle" :visible.sync="showDialog" width="50%"  @close="closeDialog" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form @submit.native.prevent ref="form" :model="form" :rules="rules"  size="small" label-position="right" label-width="110px" v-loading="init">
        <el-form-item :label="$root.lang.control.device.create.deviceName" prop="deviceName">
          <el-input v-model="form.deviceName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="dialog-btn" :loading="loading" type="primary" @click="onSubmit('form')">{{ $root.lang.control.device.create.confirm }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      init: false,
      loading: false,
      showDialog: this.show,
      editData: this.detail,
      form: {
        deviceName: null,
      },
      typeIndex: 0,
      rules: {
        deviceName: [{ required: true, message: this.$root.lang.control.device.create.rule.deviceName, trigger: 'blur' }],
      },
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    create: {
      type: Boolean,
      default: false
    },
    deviceName: {
      type: String,
      default: null
    },
    deviceId: {
      type: Number,
      default: null
    },
  },
  watch: {
    show: function (value) {
      if(this.$refs['form']) this.$refs['form'].resetFields()
      this.showDialog = value
      this.form.deviceName = this.deviceName
    },
  },
  computed: {
    setTitle() {
      return this.create ? this.$root.lang.control.device.create.createTitle : this.$root.lang.control.device.create.editTitle
    },
    isEdit() {
      return false
    }
  },
  methods: {
    closeDialog() {
      this.$emit('editReceive',{
        key: 'showEdit',
        value: this.showDialog
      })
    },
    onSubmit(formName) {
      let base = this
      var flag = true

      base.$refs[formName].validate((valid) => {
        if (!valid) {
          flag = false
          return false
        }
      })
      if(flag) {
        base.doCreate()
      }
    },
    doCreate() {
      let base = this
      base.loading = true
      let url = '/device/insert?deviceName=' + base.form.deviceName
      let msg = this.$root.lang.confirm.addSuccess
      if(!this.create) {
        url = '/device/update?id=' + this.deviceId + '&deviceName=' + base.form.deviceName
        msg = this.$root.lang.confirm.editSuccess
      }
      base.request({
        url: url,
        method: 'get',
      }).then(response => {
        base.loading = false
        base.showDialog = false
        base.$emit('reload')
        base.$message({
          message: msg,
          type: 'success',
          duration: 3 * 1000,
        })
      }).catch(error => {
        base.loading = false
        base.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
  },
  created() {
    var lett = this;
    document.onkeydown = function(e) {
      var key = window.event.keyCode;
      var button = document.querySelector('.dialog-btn')
      if(!button) return
      if (key == 13) {
        lett.onSubmit('form')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import '@/css/base.scss';
.app-container {
  .edit-form {
    width: 700px;
    textarea {
      width: 88%;
      height: 120px;
      resize: none;
    }
  }
  .el-input {
    display: inline-block;
    height: 47px;
    width: 88%;
  }
  .el-upload-list {
    display: table;
  }
  .push-time {
    margin-bottom: 10px;
    .el-input__prefix {
      height: auto;
    }
  }
  .begin-time,
  .end-time {
    display: inline-block;
    width: auto;
  }
  .fa-plus-circle,
  .fa-minus-circle {
    margin-left: 4px;
    font-size: 24px;
    opacity: 0.7;
  }
  .fa-plus-circle:hover,
  .fa-minus-circle:hover {
    opacity: 1;
    cursor: pointer;
  }
  .fa-minus-circle {
    /*color: $cancel-color;*/
  }
}

</style>